import React, { useState } from 'react';

const CommentBox = () => {
  const [isCommentVisible, setIsCommentVisible] = useState(false);
  const [comment, setComment] = useState('');
  const [comments, setComments] = useState([]); // 存储所有评论
  const [editingCommentId, setEditingCommentId] = useState(null); // 当前正在编辑的评论 ID
  const [editedComment, setEditedComment] = useState(''); // 编辑中的评论内容

  // 点击评论图标，切换输入框可见性
  const handleCommentIconClick = () => {
    setIsCommentVisible(!isCommentVisible);
  };

  // 输入框内容变化时更新状态
  const handleCommentChange = (e) => {
    setComment(e.target.value);
  };

  // 提交评论
  const handleSubmitComment = () => {
    if (comment.trim() !== '') {
      const newComment = {
        id: Date.now(), // 使用时间戳作为唯一 ID
        text: comment,
      };
      setComments([...comments, newComment]); // 添加新评论到评论列表
      setComment(''); // 清空输入框
      setIsCommentVisible(false); // 隐藏输入框
    } else {
      alert('评论不能为空');
    }
  };

  // 删除评论
  const handleDeleteComment = (id) => {
    setComments(comments.filter((comment) => comment.id !== id)); // 过滤掉被删除的评论
  };

  // 进入编辑模式
  const handleEditComment = (id, text) => {
    setEditingCommentId(id); // 设置当前编辑的评论 ID
    setEditedComment(text); // 设置编辑中的评论内容
  };

  // 保存编辑
  const handleSaveEdit = () => {
    if (editedComment.trim() !== '') {
      setComments(
        comments.map((comment) =>
          comment.id === editingCommentId ? { ...comment, text: editedComment } : comment
        )
      ); // 更新评论内容
      setEditingCommentId(null); // 退出编辑模式
      setEditedComment(''); // 清空编辑内容
    } else {
      alert('评论不能为空');
    }
  };

  return (
    <div>
      {/* 评论图标 */}
      <div onClick={handleCommentIconClick} style={{ cursor: 'pointer' }}>
       💬  发表评论
      </div>

      {/* 评论输入框和发表按钮 */}
      {isCommentVisible && (
        <div>
          <textarea
            value={comment}
            onChange={handleCommentChange}
            placeholder="输入你的评论..."
            rows={4}
            cols={50}
          />
          <br />
          <button onClick={handleSubmitComment}>发表</button>
        </div>
      )}

      {/* 评论列表 */}
      <div >
        <h3>评论列表</h3>
        {comments.length === 0 ? (
          <p>暂无评论</p>
        ) : (
          <ul>
            {comments.map((comment) => (
              <li key={comment.id}>
                {editingCommentId === comment.id ? (
                  // 编辑模式
                  <div>
                    <textarea
                      value={editedComment}
                      onChange={(e) => setEditedComment(e.target.value)}
                      rows={2}
                      cols={40}
                    />
                    <button onClick={handleSaveEdit}>保存</button>
                  </div>
                ) : (
                  // 显示模式
                  <div style={{padding:'10px',width:'300px'}}>
                    <span>{comment.text}</span>
                    <button onClick={() => handleEditComment(comment.id, comment.text)}>编辑</button>
                    <button onClick={() => handleDeleteComment(comment.id)}>删除</button>
                  </div>
                )}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  ); 
};

export default CommentBox;